<template>
  <div class="left-container">
    <h2 ref="h2">Left</h2>
    <p ref="p">{{age}}</p>
    <button @click="age++">+1</button>
    <art-list ref="artlistRef"></art-list>
  </div>
</template>

<script>
import ArtList from '../components/MyList.vue'
export default {
  components: {
    ArtList
  },
  data() {
    return {
      age:20
    }
  },
  // 第一个钩子函数
  beforeCreate() {
    console.log('beforeCreate',this.age)
  },
  //第二个钩子函数   ******
  created() {
    console.log('created',this.age)
  },
  //第三个钩子函数
  beforeMount() {
    console.log('beforeMount',this.$refs.h2)
  },
  //第四个钩子函数   ******
  mounted() {
    console.log('mounted',this.$refs.h2)
  },
  //第五个钩子函数
  beforeUpdate() {
    console.log('beforeUpdate',this.age,this.$refs.p.innerHTML)
  },
  //第六个钩子函数
  updated() {
    console.log('updated',this.age,this.$refs.p.innerHTML)
  },
  // 7. beforeDestroy
  beforeDestroy() {
    console.log('第7个', '组件即将被销毁')
    console.log(this.$refs.artlistRef)  // 这里的artlistRef 是 子组件的ref
  },
  // 8. destroyed
  destroyed() {
    console.log('第8个', '组件已经被销毁')
    console.log(this.$refs.artlistRef)  // 这里的artlistRef 是 子组件的ref
  },
  // errorCaptured(err,vm,info) {
  //   console.log(err.message) //错误描述信息
  //   console.log(vm)  // 发生错误的组件的实例对象
  //   console.log(info)  // 也是一个描述信息
  //   return false  //阻止错误继续传播
  // }
}
</script>

<style lang="less" scoped>
.left-container {
  background-color: cadetblue;
}
</style>